<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./css/index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      /* 默认样式 */
      .box {
        width: 50%;
        height: 100%;
      }

      /* 在屏幕宽度小于600像素时应用不同的样式 */
      @media (max-width: 600px) {
        .box {
          width: 100%;
        }
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 头部 -->
      <div class="head">
        <div class="head-one"><span>犀牛好物</span></div>
        <div class="head-two">
          <input type="text" /><img src="./img/搜索.png" alt="" /><span
            >婴儿奶粉</span
          >
        </div>
        <div class="head-three"><img src="./img/图像 3.png" alt="" /></div>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <div class="nav-one">
          <div class="col">
            <img src="./img/分组 3.png " alt="" />
            <span>拼团好物</span>
          </div>
          <div class="col">
            <img src="./img/分组 4.png " alt="" />
            <span>乳品饮料</span>
          </div>
          <div class="col">
            <img src="./img/11.jpg " alt="" />
            <span>休闲零食</span>
          </div>
          <div class="col">
            <img src="./img/分组 1.png" alt="" />
            <span>粮油干货</span>
          </div>
          <div class="col">
            <img src="./img/12.jpg " alt="" />
            <span>日化洗护</span>
          </div>
          <div class="col">
            <img src="./img/13.jpg" alt="" />
            <span>限时秒杀</span>
          </div>
          <div class="col">
            <img src="./img/14.jpg" alt="" />
            <span>在线教育</span>
          </div>
          <div class="col">
            <img src="./img/15.jpg" alt="" />
            <span>逍遥旅游</span>
          </div>
        </div>
        <div class="nav-two">
          <img src="./img/包租婆胶囊.png" alt="" />
        </div>
      </div>
      <!-- 主体 -->
      <div class="main">
        <div class="main-one">
          <span>秒杀专区</span>
        </div>

        <div class="list">

        </div>
        <!-- 商品 -->
        <!-- <div class="main-two">
          <div class="kuang">
            <div class="he">
              <img src="./img/tu3.png" alt="" />
              <div class="lv">12.26好物年货节</div>
            </div>
          </div>
          <div class="jianjie">
            <h6>广西优质蜜柚1000g/份</h6>
            <div class="num">限量200件</div>
            <div class="biao">
              <span>包邮</span>
              <span>包送货</span>
            </div>
            <div class="price">
              <span class="orange">￥2.99</span>
              <span class="gray">30.00</span>
              <button>立即购买</button>
            </div>
          </div>
        </div> -->
      </div>
      <!-- 底部 -->
      <div class="footer">
        <div class="lie">
          <img src="./img/icon-首页-默认.png" alt="" />
          <span>首页</span>
        </div>
        <div class="lie">
          <img src="./img/icon-品牌馆-默认.png" alt="" />
          <span>品牌馆</span>
        </div>
        <div class="lie">
          <img src="./img/icon-购物车-默认.png" alt="" />
          <span>购物车</span>
        </div>
        <div class="lie">
          <img src="./img/icon-我的-默认.png" alt="" />
          <span>个人中心</span>
        </div>
      </div>
    </div>
    <script>
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "http://localhost:3000/product");
      xhr.onload = function () {
        console.log(xhr.responseText);
        let product = JSON.parse(xhr.responseText);

        render(product);
      };
      xhr.onerror = function (params) {};
      xhr.send(null);

      function render(product) {
        let html = "";
        product.data.forEach((item) => {
          html += `     
            <div class="main-two">
          <div class="kuang">
            <div class="he">
              <img src="${item.img}" alt="" />
              <div class="lv">12.26好物年货节</div>
            </div>
          </div>
          <div class="jianjie">
            <h6>${item.title}</h6>
            <div class="num">${item.num}</div>
            <div class="biao">
              <span>包邮</span>
              <span>包送货</span>
            </div>
            <div class="price">
              <span class="orange">￥${item.price}</span>
              <span class="gray">30.00</span>
              <button>立即购买</button>
            </div>
          </div>
        </div>`;
        });

        document.querySelector(".list").innerHTML = html;
      }
    </script>
  </body>
</html>
